<template>
  <div>
    <!-- 底部模块 -->
    <div
      class="contain"
      style="background-image:url('static/images/bottom_bg.png')"
    >
      <div class="model">
        <div>
          <el-row>
            <el-col :span="18">
              <h1 class="title">{{ gsmc }}</h1>
              <div class="place">
                <h2>地址：{{ dz }}</h2>
                <h2>
                  电 话： {{ dh }} 邮箱：support@modao.cc 办公时间：周一至周五
                  09:00-12:00 ，14:00-17:00
                </h2>
              </div>
              <div class="friendLink">
                友情链接：<a :href="b1" target="_blank">{{ a1 }}</a
                >|<a :href="b2" target="_blank">{{ a2 }}</a
                >|<a :href="b3" target="_blank">{{ a3 }}</a>
                <a :href="b4" target="_blank">{{ a4 }}</a>
              </div>
            </el-col>
            <el-col :span="6" class="rightLink">
              <div class="clearFix">
                <div class="wechat iconfont icon-weixin"></div>
                <div class="webo iconfont icon-weibo"></div>
                <img :src="ewm" class="ewm" />
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="copyright">
      <p>
        滇ICP备07000700号 教育前置审批号：0404001 滇公网安备 53011402000114号
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: this.$store.state.programName,
      dz: "",
      dh: "",
      gsmc: "",
      a1: "",
      b1: "",
      a2: "",
      b2: "",
      a3: "",
      b3: "",
      a4: "",
      b4: "",
      ewm: ""
    };
  },
  methods: {
    getData() {
      // const formData = new FormData();
      // formData.append('pop',4)
      this.$http
        .get(this.$baseUrl.searchAdmin, {
          params: {
            pop: "4"
          }
        })
        .then(res => {
          console.log(res);
          this.dz = res.data[0].dz;
          this.dh = res.data[0].dh;
          this.gsmc = res.data[0].gs_mc;
          this.a1 = res.data[0].a1;
          this.b1 = res.data[0].b1;
          this.a2 = res.data[0].a2;
          this.b2 = res.data[0].b2;
          this.a3 = res.data[0].a3;
          this.b3 = res.data[0].b3;
          this.a4 = res.data[0].a4;
          this.b4 = res.data[0].b4;
          this.ewm = res.data[0].ewm;
        })
        .catch(err => {
          console.log("err", err);
        });
    }
  },
  mounted() {
    this.getData();
  }
};
</script>

<style scoped lang="scss">
.ewm {
  width: 40px;
  height: 40px;
}
.contain {
  height: 281px;
  background-size: cover;
  background-repeat: no-repeat;
  .model {
    width: 1200px;
    margin: 0 auto;
    color: #ffffff;
    padding-top: 58px;
    .title {
      margin-bottom: 19px;
      font-size: 24px;
      line-height: 36px;
      font-weight: 500;
    }
    .place {
      margin-bottom: 18px;
      h2 {
        font-size: 14px;
        line-height: 32px;
        font-weight: 500;
      }
    }
    .friendLink {
      a {
        color: inherit;
        display: inline-block;
        padding: 0 12px;
      }
    }
    .rightLink {
      height: 158px;
      position: relative;
      & > div {
        display: inline-block;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .wechat,
    .webo {
      width: 63px;
      height: 63px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.3);
      text-align: center;
      line-height: 63px;
      float: left;
      font-size: 25px;
      transition: 0.3s;
      cursor: pointer;
      &:hover {
        color: $base-color;
        background-color: #ffffff;
      }
    }
    .wechat {
      margin-right: 27px;
    }
  }
}
.copyright {
  font-size: 12px;
  color: $nomal-color;
  p {
    padding: 18px 0;
    width: 1200px;
    margin: 0 auto;
    display: block;
  }
}
</style>
